<template>
	<view class="l-barrage">
		<block v-for="(item,index) in items" :key="index">
			<view v-if="item.display" class="aon" :style="{top: `${item.top}%`,
				  animation: `mymove ${Number(item.time)}s linear forwards`
				  }">
				  <image class="image_style" :src="item.image"></image>
				<view class="text_style">
					{{item.text}}
				</view>
			</view>

		</block>
	</view>
</template>

<script>
	let cycle;

	export default {
		name: 'l-barrage',
		props: {
			minTime: {
				type: Number,
				default: 4
			},
			maxTime: {
				type: Number,
				default: 9
			},
			minTop: {
				type: Number,
				default: 5
			},
			maxTop: {
				type: Number,
				default: 25
			}
		},
		data() {
			return {
				items: [],
			}
		},
		methods: {
			add(param) {
				this.items.push({
					text:param.text,
					image:param.image,
					time:this.maxTime,
					top: Math.ceil(Math.random() * (this.maxTop - this.minTop + 1) + this.minTop),
					display: 1,
				});
			},
			start(items = []) {
				this.items = [];
				cycle && (clearInterval(cycle));
				let i = 0,
					len = items.length;

				cycle = setInterval(() => {
					let time = 5;
					// #ifndef H5
					time = Math.ceil(Math.floor(Math.random() * (this.maxTime - this.minTime + 1) + this.minTime));
					// #endif

					if (i < len) {
						this.add(items[i], time);
						i++;
					} else {
						clearInterval(cycle);
						setTimeout(() => {
							this.$emit("end", {});
						}, time * 1000)
					}
				}, 500)
			}
		}
	}
</script>

<style>
	.aon {
		position: fixed;
		display: flex;
		white-space: nowrap;
		animation: mymove 5s linear forwards;
		animation-timing-function: linear;
		-webkit-animation-timing-function: linear;
		animation-fill-mode: forwards;
		height: 60rpx;
		background-color: rgba(0,0,0,0.6);
		border-radius: 30rpx;
		line-height: 60rpx;
	}

	.l-barrage {
		z-index: 3;
		width: 100%;
		position: fixed;
	}
	
	.image_style{
		margin-top: 5rpx;
		border-radius: 25rpx;
		margin-left: 5rpx;
		height: 50rpx;
		width: 50rpx;
	}
	
	.text_style{
		line-height: 60rpx;
		margin-left: 10rpx;
		font-size: 26rpx;
		color: #fff;
		margin-right: 20rpx;
	}

	@keyframes mymove {
		from {
			left: 100%;
		}

		to {
			left: -200%;
		}
	}

	@-moz-keyframes mymove

	/* Firefox */
		{
		from {
			left: 100%;
		}

		to {
			left: -200%;
		}
	}

	@-webkit-keyframes mymove

	/* Safari and Chrome */
		{
		from {
			left: 100%;
		}

		to {
			left: -200%;
		}
	}

	@-o-keyframes mymove

	/* Opera */
		{
		from {
			left: 100%;
		}

		to {
			left: -200%;
		}
	}
</style>
